<template>
  <section>
        <el-row type="flex" class="row-bg" justify="end">
        </el-row>
        <el-row>
         <el-col :span="24">
            <el-table :data="data.list" style="width: 100%">
              <el-table-column  prop="startTime"  label="开始时间"  width="180">
                <template slot-scope="scope">
                  {{scope.row.startTime/1000|moment("YYYY-MM-DD HH:mm:ss")}}
                </template>
              </el-table-column>
              <el-table-column  prop="endTime" label="结束时间"  width="180">
                <template slot-scope="scope">
                  {{scope.row.endTime/1000|moment("YYYY-MM-DD HH:mm:ss")}}
                </template>
              </el-table-column>
              <el-table-column  prop="stopTime" label="停留时间"  width="180"  :formatter="formatStopTime"></el-table-column>
              <el-table-column  prop="address"label="地址"></el-table-column>
            </el-table>
          </el-col>
       </el-row>
       <el-row>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-pagination
             layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="this.$store.state.pageSizes"
            :page-size="this.$store.state.pageSize"
            :total="data.total"
            :current-page="page"
            style="float:right;">
            </el-pagination>
        </el-col>
        </el-row>

  </section>
</template>

<script>
import util from '@/utils/util'
import { getStatisticsStop } from '@/api/api'
export default {
  name: 'StatisticsStop',
  data() {
    return {
      page: 1,
      data:{}
    }
  },
  methods: {
    init() {
      let para = {
        deviceId:this.device.id,
        page: this.page,
        pageSize:this.$store.state.common.pageSize
      };
      getStatisticsStop(para).then(data => {
        this.data = data
      })
    },
    handleSizeChange(val) {
      this.$store.dispatch('updatePageSize',val);
      this.init();
     },
     handleCurrentChange(val) {
       this.page = val;
       this.init();
     },
     formatStopTime:function(row, column) {
        var diff = row[column.property];
       if (diff == undefined) {
          return "";
       }
       return util.stopTime(diff);
     }

 },
 mounted() {
   this.init()
 },

 watch: {
   'visible': function() {
       if(this.visible){
         this.init()
       }
     }
  },

  props: ['device','visible']
}
</script>

<style scoped>

</style>
